<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 250px;
            padding: 10px;
            margin: 10px;
            background-color: #ccc;
        }
        .data-show{
            border:1px solid red;
        }
        #list{
            list-style: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>
            <input type="text" placeholder="请输入商品名称" id="factor"> <button id="search">搜索</button>
        </div>
        <br>
        <div class="data-show">
            <ul id="list">
                
            </ul>
        </div>
    </div>

    <script>
        // 数据源
        let arr = [
            {id:1,name:'华为手机'},
            {id:2,name:'小米手机'},
            {id:3,name:'诺基亚手机'},
            {id:4,name:'苹果手机'}
        ]
        // 遍历添加节点
        function nodeData (arr) {
            let nodeArr = arr
            // 获取ul节点
            let list = document.getElementById('list')
            // 重置ul节点
            list.innerHTML = ''
            // 遍历数据源
            nodeArr.forEach(el=>{
                // 创建li节点
            let li = document.createElement('li')
            // 创建节点的数据
            let text = document.createTextNode(`名称：${el.name}`)
            // 将数据添加到li节点中
            li.appendChild(text)
            // li添加到ul中
            list.appendChild(li)
        })
        }
        // 初始调用
        nodeData(arr)

        // 搜索按钮
        let search = document.getElementById('search')
        search.addEventListener('click',()=>{
            // 获取输入框的内容
            let factor = document.getElementById('factor').value
            if (!factor) {
            //   为空 搜索全部
              return  nodeData(arr)
            }
            // 不为空搜索指定数据
            let backData = arr.filter(el=>{
                return el.name == factor
            })
            // 重新渲染节点
            nodeData(backData)
        })
    </script>
</body>
</html>